<template>
  <view class="main-container">
    <!--导航栏-->
    <orderTabBar :tabList="tabList" @clickTabBar="clickTabBar" class="tab-bar" :show-line="true" />
    <!--订单列表-->
    <scroll-view class="order-lists" scroll-y="true" :style="'width:100%;height:'+orderHeight+'px'" enable-flex  @scrolltolower="scrollToLower">
<!--      <block v-for="(item, index) in orderList[currentStatus]" :key="item.order_no">
        <orderListItem :orderInfo="item" :index="index" @updateOrderInfo="updateOrderInfo"></orderListItem>
      </block>-->
      <block v-for="(item, index) in orderList[currentStatus]" :key="index">
        <orderListItem :orderInfo="item" @updateOrderInfo="updateOrderInfo"></orderListItem>
      </block>

      <view class="no-data" v-if="orderList[currentStatus] !== undefined && orderList[currentStatus].length == 0">
        <image src="https://img1.baidu.com/it/u=2229818951,605055560&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" mode="aspectFit" class="no-data-img"></image>
        暂无数据
      </view>
    </scroll-view>
  </view>
</template>

<script>
import orderTabBar from '../../components/tab-bar/tab-bar.vue';
import orderListItem from '../../components/order/order-list-item.vue'
import {getUserOrderList, updateOrderStatus} from '@/api/order.js'
export default {
  components: {
    orderTabBar,
    orderListItem
  },
  data() {
    return {
      showPage: false,
      // 订单列表tab项
      tabList: [{
        status: 5,
        title: '全部'
      },
        {
          status: 2,
          title: '待付款'
        },
        {
          status: 1,
          title: '未完成'
        }
      ],
      // 当前选择tab项
      currentIndex: 0,
      // 当前查询状态
      currentStatus: 5,
      // 订单列表高度
      orderHeight: 0,
      // 是否还有更多数据
      noMoreData: {},
      // 订单列表
      // orderList: {5:[], 1:[]},
	  orderList: {},
      // 页码数组
      pageArr: {},
      // 每页请求数
      pageSize: 15
    }
  },
  onShareAppMessage(e) {
    let inviteUserId = uni.getStorageSync('uid');
    if (e.from === "button") {
      let orderId = e.target.id
      let index = e.target.dataset.index
      let currentOrder = this.orderList[this.currentStatus][index]
      return {
        title: currentOrder.goods_name,
        path: '/pagesHome/pinDetails/pinDetails?pinOrderId=' + currentOrder.pin_order_id + '&goodsId=' + currentOrder.goods_id + '&inviteUserId=' + inviteUserId,
        imageUrl: currentOrder.goods_image
      }
    } else {
      return {
        title: '微客乐购，让生活更美好！！！',
        path: '/pages/home/home?inviteUserId='+inviteUserId,
        imageUrl: 'https://wkresource.oss-cn-hangzhou.aliyuncs.com/wkfiles/wxapp/wkallbg.png',
        desc: '微客乐购，让生活更美好',
        content: 'https://wkresource.oss-cn-hangzhou.aliyuncs.com/wkfiles/wxapp/wkallbg.png',
        success(res) {
          uni.showToast({
            title: '分享成功'
          })
        },
        fail(res) {
          uni.showToast({
            title: '分享失败',
            icon: 'none'
          })
        }
      }
    }

  },
  onShow() {
    let _this = this
    //初始化数据
    _this.tabList.map(item => {
		// pageArr: {'all': 1, '2': 1}
		// orderList: [{},{}]
      _this.orderList[item.status] = []
      _this.pageArr[item.status] = 1
      _this.noMoreData[item.status] = false
      _this.showPage = false
    })
    _this.getOrderList()
  },
  mounted() {
    let _this = this;

    const query = uni.createSelectorQuery().in(this);
    query.select('.tab-bar').boundingClientRect(data => {
      _this.tabHeight = data.height
      _this.orderHeight = _this.windowHeight - _this.tabHeight - 5
    }).exec();

    //初始化数据
    /*_this.tabList.map(item => {
      _this.orderList[item.status] = []
      _this.pageArr[item.status] = 1
      _this.noMoreData[item.status] = false
      _this.showPage = false
    })*/
  },
  methods: {
    iniApi() {
      /*let _this = this
      _this.getOrderList()*/
    },
    // tab切换
    clickTabBar(index, status) {
      this.currentIndex = index
      this.currentStatus = status
      this.getOrderList()
    },
    // 加载订单列表
    getOrderList() {
		
		// noMoreData 是表示当前tab是否还有更多数据，这是一个对象
		// 状态是 当前tab的代号
		// page 是 当前状态的 页码，
		// list 是当前订单列表状态的 数据
		// pageSize 是页长
      let _this = this;
      let noMoreData = _this.noMoreData;
      let status = _this.currentStatus;
      let page = _this.pageArr[status]
      var list = _this.orderList[status] || []
      let pageSize = _this.pageSize

      if (noMoreData[status]) return;
      let params = {
        pageSize: pageSize,
        page
      }
      // if (status != 5) {
		params['status'] = status
      // }
	  //uni.showLoading({})
      getUserOrderList(params,
		(res) => {
			  let dataVO = res.data.data.records
			  let data = dataVO.map(element => {
				  return element.order
			  })
			
			// 初始为1，如果下一页没有达到页长15，则不加页数，后面以及没有数据了，糟糕的代码，因为分页插件会返回查询总数，而这个看来是返回的列表
			  _this.pageArr[status] = data.length == pageSize ? ++page : page;
			  _this.noMoreData[status] = data.length == pageSize ? false : true;
			  list.push(...data)
			  _this.orderList[status] = list
			// 强制更新
			_this.$forceUpdate()
			
			//uni.hideLoading()
			_this.showPage = true
		})
    },
    // 更新order
    updateOrderInfo(id, status) {
      let _this = this
		console.log(id + "   " + status)
      // _this.orderList[_this.currentStatus][index].pay_status = 4
      // _this.$set(_this.orderList, index, _this.orderList[_this.currentStatus][index]);
	  
	  // 发送更新 请求
	  updateOrderStatus({
		  id: id,
		  status: status
	  }, (res) => {
		  //直接更新所有的状态并重新请求接口数据
		  _this.tabList.map(item => {
		    _this.orderList[item.status] = []
		    _this.pageArr[item.status] = 1
		    _this.noMoreData[item.status] = false
		    _this.showPage = false
		  })
		  _this.getOrderList()
	  })
    },
    // 滑到底部 加载更多
    scrollToLower() {
      this.getOrderList();
    }
  },
  computed: {

  }
}
</script>

<style>
.main-container {
  width: 100vw;
  height: 100vh;
  background-color: #F5F6F9;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.main-container .tab-bar {
  width: 100%;
}

.main-container .order-lists {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.no-data {
  width: 100%;
  height: 300rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  margin-top: 100rpx;
}
.no-data .no-data-img {
  width: 300rpx;
  height: 268rpx;
}
</style>